<template xmlns="http://www.w3.org/1999/html">
  <div>
    <el-tooltip content="注：由于部分站点的地理位置一样，可能会多个图标重叠在一起，请善用过滤..." effect="dark" placement="top">
      <el-card>
        <el-checkbox-group v-model="filterTypes">
          <el-checkbox v-for="(i,index) in labels" id="items" :key="index" :label="i.label" @change="applyFilter($event,i.label)">
            <img :height="size" :src="i.src" :width="size" alt="" class="item"> {{ i.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-card>
    </el-tooltip>
  </div>
</template>

<script>

export default {
  name: "MarkerLegend",
  data() {
    return {
      size: '20px',
      labels: [
        {
          src: require("../assets/markers/bus_1.png"),
          label: "上班"
        },
        {
          src: require("../assets/markers/bus_2.png"),
          label: "下班"
        },
        {
          src: require("../assets/markers/bus_3.png"),
          label: "加班"
        },
        {
          src: require("../assets/markers/bus_4.png"),
          label: "周末上班"
        },
        {
          src: require("../assets/markers/bus_5.png"),
          label: "周末下班"
        },
      ],
      filterTypes: ["上班"]
    }
  },
  methods: {
    applyFilter(e, label) {
      let obj = {
        flag: e,
        label: label
      }
      this.bus.$emit("markerFilter", obj);
    }
  }
}
</script>

<style scoped>
#items {
  margin-left: 10px;
}
</style>
